:root {
    /* White, Grays & Black */
    --color-white: #FFFFFF;
    --color-gray-light: #F5F5F5;
    --color-gray: #BCBCBC;
    --color-gray-dark: #E6E6E6;
    --color-black-light: #343434;
    --color-black: #000000;

    /* Base Colors */
    --color-blue: #0194D7;
    --color-purple: #683193;
    --color-yellow: #F4E04D;
    --color-green: #63C558;
    --color-red: #DA291C;

    /* Tints Level 1 */
    --color-blue-light: #61D6FF;
    --color-purple-light: #9C4DE8;
    --color-yellow-light: #FCF29F;
    --color-green-light: #C1E8BC;

    /* Tints Level 2 */
    --color-blue-lighter: #D2F5FF;
    --color-purple-lighter: #E6D6FC;
    --color-yellow-lighter: #FCF6D4;
    --color-green-lighter: #E0F9DC;

    /* fonts */
    --font-noto: "Noto Sans JP", sans-serif;
    --font-oxygen: "Oxygen", sans-serif;
    
    /* gradient */
    --gradient90: linear-gradient(90deg, rgba(97,214,255,1) 45%, rgba(156,77,232,1) 65%, rgba(218,41,28,1) 100%);
    --gradient-90: linear-gradient(-90deg, rgba(97,214,255,1) 45%, rgba(156,77,232,1) 65%, rgba(218,41,28,1) 100%);
}